<template>
    <div class="warehouse-details">
        <el-drawer v-model="dialogVisible" title="仓库详情" size="1200px" :with-header="false" direction="rtl">
            <div class="drawer-header">
                <div class="title">{{ props.dialogRow.name || 'XXX仓库' }}</div>
                <!-- <el-button plain @click="dialogVisible = false">
                    <el-icon>
                        <Close />
                    </el-icon>
                </el-button> -->
            </div>

            <div class="drawer-content">
                <div class="tab-header">
                    <div class="warehouse-info">
                        <div class="info-item">
                            <div class="label">仓库编号</div>
                            <div class="value">{{ props.dialogRow.code }}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">库管人员</div>
                            <div class="value">{{ props.dialogRow.manager_name }}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">联系人电话</div>
                            <div class="value">{{ props.dialogRow.manager_phone }}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">仓库地址</div>
                            <div class="value">{{ props.dialogRow.address }}</div>
                        </div>
                        <div class="info-item">
                            <div class="label">库房类型</div>
                            <div class="value">{{ props.dialogRow.type_text }}</div>
                        </div>
                    </div>
                </div>

                <div class="tab-container">
                    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                        <el-tab-pane label="基础信息" name="basic">
                            <div class="info-section">
                                <div class="section-title">
                                    <el-icon>
                                        <ArrowDown />
                                    </el-icon>
                                    <span>基础信息</span>
                                </div>
                                <div class="info-grid">
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">仓库名称：</span>
                                            <span class="value">{{ props.dialogRow.name || 'XXXX仓库' }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">仓库编号：</span>
                                            <span class="value">{{ props.dialogRow.code }}</span>
                                        </div>
                                    </div>
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">库房类型：</span>
                                            <span class="value">{{ props.dialogRow.type_text }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">库管人员：</span>
                                            <span class="value">{{ props.dialogRow.manager_name }}</span>
                                        </div>
                                    </div>
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">联系电话：</span>
                                            <span class="value">{{ props.dialogRow.manager_phone }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">仓库地址：</span>
                                            <span class="value">{{ props.dialogRow.address }}</span>
                                        </div>
                                    </div>
                                    <div class="info-row">
                                        <div class="info-col full-width">
                                            <span class="label">备注：</span>
                                            <span class="value">{{ props.dialogRow.note }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="info-section">
                                <div class="section-title">
                                    <el-icon>
                                        <ArrowDown />
                                    </el-icon>
                                    <span>系统信息</span>
                                </div>
                                <div class="info-grid">
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">创建人：</span>
                                            <span class="value">{{ props.dialogRow.creator_name }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">创建时间：</span>
                                            <span class="value">{{ props.dialogRow.create_time }}</span>
                                        </div>
                                    </div>
                                    <div class="info-row">
                                        <div class="info-col">
                                            <span class="label">修改人：</span>
                                            <span class="value">{{ props.dialogRow.modifier_name }}</span>
                                        </div>
                                        <div class="info-col">
                                            <span class="label">修改时间：</span>
                                            <span class="value">{{ props.dialogRow.update_time || '2024-02-02 11:16'
                                                }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="产品库存" name="inventory">
                            <div class="inventory-content" style="height: 690px;">
                                <div class="inventory-layout">
                                    <!-- 左侧产品分组 -->
                                    <div class="product-category" :class="{ 'is-collapsed': isCollapsed }">
                                        <div class="category-header">
                                            <div class="header-title">
                                                <span>产品spu</span>
                                                <el-button link @click="toggleSearch">
                                                    <el-icon>
                                                        <Search />
                                                    </el-icon>
                                                </el-button>
                                            </div>

                                        </div>

                                        <!-- 搜索框 -->
                                        <div v-show="showSearch" class="category-search">
                                            <el-input v-model="categorySearch" placeholder="请输入分组名称" clearable>
                                                <template #prefix>
                                                    <el-icon>
                                                        <Search />
                                                    </el-icon>
                                                </template>
                                            </el-input>
                                        </div>

                                        <!-- 分组列表 -->
                                        <div class="category-list">
                                            <el-menu :default-active="activeCategory" @select="handleCategorySelect"
                                                active-text-color="#6860FF">
                                                <el-menu-item v-for="category in filteredCategories" :key="category.id"
                                                    :index="category.id">
                                                    <span>{{ category.name }}</span>
                                                </el-menu-item>
                                            </el-menu>
                                        </div>
                                    </div>

                                    <!-- 右侧产品列表 -->
                                    <div class="product-content" :class="{ 'is-expanded': isCollapsed }">
                                        <div class="search-bar">
                                            <el-input v-model="shechValue" @input="inputSearch" placeholder="产品名称/规格型号"
                                                style="width: 250px">
                                                <template #prefix>
                                                    <el-icon>
                                                        <Search />
                                                    </el-icon>
                                                </template>
                                            </el-input>


                                        </div>

                                        <div class=" inbound-list">
                                            <el-table :data="productList" border style=" width: 100%;">

                                                <el-table-column label="产品名称" prop="name">
                                                    <template #default="scope">
                                                        <div>
                                                            {{ scope.row?.product?.name }}
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="产品编码" prop="code">
                                                    <template #default="scope">
                                                        <div>
                                                            {{ scope.row?.product?.no }}
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="规格型号" prop="specification">
                                                    <template #default="scope">
                                                        <div>
                                                            {{ scope.row?.product?.specification }}
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="单位" prop="unit" width="80" align="center">
                                                    <template #default="scope">
                                                        <div>
                                                            {{ scope.row?.product?.unit }}
                                                        </div>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="库存数量" prop="stock" align="center">
                                                    <template #default="scope">
                                                        <div>
                                                            {{ scope.row?.stock_num }}
                                                        </div>
                                                    </template>
                                                </el-table-column>

                                                <el-table-column label="产品图片" align="center">
                                                    <template #default="scope">
                                                        <el-image style="width: 40px; height: 40px"
                                                            :src="scope.row?.product?.img[0]" fit="cover" />
                                                    </template>
                                                </el-table-column>

                                            </el-table>
                                        </div>

                                        <div class="pagination">

                                            <Pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                                                :page-sizes="[10, 20, 50, 100]" :total="total"
                                                layout="total, sizes, prev, pager, next, jumper" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <!-- <el-tab-pane label="产品入库" name="inbound">
                            <div class="inbound-content">
                                <div class="search-bar" style="justify-content: flex-start;">
                                    <el-input v-model="inboundSearch" placeholder="订单类型/采购单/出库退货单" style="width: 300px">
                                        <template #prefix>
                                            <el-icon>
                                                <Search />
                                            </el-icon>
                                        </template>
                                    </el-input>

                                    <div class="filter-buttons">
                                        <span class="margin-right-10">显示:</span>
                                        <el-button :color="inboundStatusData === 'pending' ? '#172B4D' : ''"
                                            @click="handleShowInbound('pending')"> 未入库 </el-button>
                                        <el-button :color="inboundStatusData === 'approved' ? '#172B4D' : ''"
                                            @click="handleShowInbound('approved')"> 已入库 </el-button>
                                    </div>
                                </div>

                                <div class="inbound-list">
                                    <el-table :data="inboundList" border style="width: 100%">
                                        <el-table-column label="订单类型" prop="type" width="100" />
                                        <el-table-column label="采购单/出库退货单" prop="orderNo" width="180" />
                                        <el-table-column label="采购/退货日期" prop="date" width="120" />
                                        <el-table-column label="供应商/客户" prop="supplier" width="150" />
                                        <el-table-column label="采购/出库退货负责人" prop="manager" width="160" />
                                        <el-table-column label="联系电话" prop="phone" width="120" />
                                        <el-table-column label="状态" width="100">
                                            <template #default="scope">
                                                <el-tag :type="scope.row.status === 'pending' ? 'warning' : 'success'">
                                                    {{ scope.row.statusText }}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="备注" prop="remark" min-width="150" />

                                        <el-table-column label="创建人" prop="creator" />
                                        <el-table-column label="创建时间" prop="create_time" width="120" />
                                        <el-table-column label="审批人" prop="approver" />



                                        <el-table-column label="操作" fixed="right">
                                            <template #default>
                                                <el-button link type="primary">入库</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>

                                <div class="pagination">
                    
                                    <Pagination v-model:current-page="inboundPage" v-model:page-size="inboundPageSize"
                                        :page-sizes="[10, 20, 50, 100]" :total="inboundTotal"
                                        layout="total, sizes, prev, pager, next, jumper" />
                                </div>
                            </div>
                        </el-tab-pane> -->
                        <el-tab-pane label="入库记录" name="inbound-record">
                            <div class="record-content">
                                <div class="search-bar">
                                    <el-input @input="getInboundRecordList" v-model="recordSearch"
                                        placeholder="入库单号/仓库名称" style="width: 300px">
                                        <template #prefix>
                                            <el-icon>
                                                <Search />
                                            </el-icon>
                                        </template>
                                    </el-input>
                                </div>

                                <div class="record-list inbound-list">
                                    <el-table :data="recordList" border style="width: 100%">

                                        <el-table-column align="center" prop="no" label="单号" width="200">
                                            <template #default="scope">
                                                <div style="color: blue; cursor: pointer;">
                                                    {{ scope.row.no }}
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="center" prop="source_type_text" label="订单类型"
                                            width="120">
                                            <template #default="scope">
                                                {{ scope.row.source_type_text }}
                                            </template>
                                        </el-table-column>

                                        <el-table-column align="center" prop="source_no" label="关联编号" width="200" />
                                        <el-table-column align="center" prop="warehouse.name" label="仓库名称"
                                            width="140" />
                                        <el-table-column align="center" prop="warehouse.code" label="仓库编码"
                                            width="120" />
                                        <el-table-column align="center" prop="in_date" label="日期" width="180" />
                                        <el-table-column align="center" prop="warehouse.manager_name" label="负责人"
                                            width="120" />
                                        <el-table-column align="center" prop="warehouse.manager_phone" label="联系电话"
                                            width="140" />
                                        <el-table-column align="center" prop="is_excp_rc" label="是否容错" width="120">
                                            <template #default="scope">
                                                <el-tag :type="scope.row.is_excp_rc === 1 ? 'success' : 'danger'">
                                                    {{ scope.row.is_excp_rc === 1 ? '是' : '否' }}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="center" prop="warehouse.address" label="地址"
                                            width="180" />
                                        <el-table-column align="center" prop="note" label="备注" width="120" />
                                        <el-table-column align="center" prop="creator_name" label="创建人" width="120" />
                                        <el-table-column align="center" prop="created_at" label="创建时间" width="180" />
                                    </el-table>
                                </div>

                                <div class="pagination">
                                    <!-- <el-pagination v-model:current-page="recordPage" v-model:page-size="recordPageSize"
                                            :page-sizes="[10, 20, 50, 100]" :total="recordTotal"
                                            layout="total, sizes, prev, pager, next, jumper" /> -->
                                    <Pagination v-model:current-page="recordPage" v-model:page-size="recordPageSize"
                                        :page-sizes="[10, 20, 50, 100]" :total="recordTotal"
                                        layout="total, sizes, prev, pager, next, jumper" />
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="产品出库" name="outbound">
                            <div class="outbound-content">
                                <div class="search-bar" style="justify-content: flex-start;">
                                    <el-input @input="getOutboundList" v-model="outboundSearch"
                                        placeholder="订单类型/销售单/入库退货单" style="width: 300px">
                                        <template #prefix>
                                            <el-icon>
                                                <Search />
                                            </el-icon>
                                        </template>
                                    </el-input>

                                    <div class="filter-buttons">
                                        <span class="margin-right-10">显示:</span>
                                        <el-button :color="searchStatus === '1' ? '#172B4D' : ''"
                                            @click="handleStatusFilter('1')">
                                            未入库
                                        </el-button>
                                        <el-button :color="searchStatus === '2' ? '#172B4D' : ''"
                                            @click="handleStatusFilter('2')">
                                            部分入库
                                        </el-button>
                                        <el-button :color="searchStatus === '3' ? '#172B4D' : ''"
                                            @click="handleStatusFilter('3')">
                                            全部入库
                                        </el-button>
                                    </div>
                                </div>

                                <div class="outbound-list inbound-list">
                                    <el-table :data="outboundList" border style="width: 100%">
                                        <el-table-column align="center" prop="source_type_text" label="类型" width="120">
                                            <template #default="scope">
                                                {{ scope.row.source_type_text }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="center" prop="no" label="单号" width="200">
                                            <template #default="scope">
                                                <div style="color: blue; cursor: pointer;">
                                                    {{ scope.row.no }}
                                                </div>
                                            </template>
                                        </el-table-column>

                                        <el-table-column align="center" prop="date" label="日期" width="120" />
                                        <el-table-column align="center" prop="contact_name" label="负责人" width="120" />
                                        <el-table-column align="center" prop="contact_phone" label="联系电话" width="140" />

                                        <el-table-column align="center" prop="status" label="状态" width="120">
                                            <template #default="scope">
                                                <el-tag type="warning" v-if="scope.row.status == '1'">待出库</el-tag>
                                                <el-tag type="success" v-if="scope.row.status == '2'">部分出库</el-tag>
                                                <el-tag type="danger" v-if="scope.row.status == '3'">已出库</el-tag>
                                            </template>
                                        </el-table-column>

                                        <el-table-column align="center" prop="note" label="备注" width="120" />

                                        <el-table-column align="center" prop="creator_name" label="创建人" width="120" />
                                        <el-table-column align="center" prop="created_at" label="创建时间" width="180" />
                                        <el-table-column align="center" prop="audit_admin_name" label="审批人"
                                            width="120" />
                                        <el-table-column align="center" prop="audited_at" label="审批时间" width="180" />

                                        <el-table-column align="center" prop="operation" label="操作">
                                            <template #default="scope">
                                                <el-button :disabled="scope.row.status == '3'" type="primary"
                                                    size="small" @click="OutboundClickEdit(scope.row)">出库</el-button>
                                            </template>
                                        </el-table-column>


                                    </el-table>
                                </div>

                                <div class="pagination">

                                    <Pagination v-model:current-page="outboundPage" v-model:page-size="outboundPageSize"
                                        :page-sizes="[10, 20, 50, 100]" :total="outboundTotal"
                                        layout="total, sizes, prev, pager, next, jumper" />
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="出库记录" name="outbound-record">
                            <div class="record-content">
                                <div class="search-bar">
                                    <el-input @input="getOutboundRecordList" v-model="outboundRecordSearch"
                                        placeholder="出库单号/订单类型/仓库名称" style="width: 300px">
                                        <template #prefix>
                                            <el-icon>
                                                <Search />
                                            </el-icon>
                                        </template>
                                    </el-input>
                                </div>

                                <div class="record-list inbound-list">
                                    <el-table :data="outboundRecordList" border style="width: 100%">
                                        <el-table-column align="center" prop="no" label="出库单号" width="210">
                                            <template #default="scope">
                                                <div style="color: blue; cursor: pointer;">{{ scope.row.no }}</div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="center" prop="source_type_text" label="订单类型"
                                            width="100" />
                                        <el-table-column align="center" prop="source_no" label="关联出库单/采购退货单"
                                            width="220" />
                                        <el-table-column align="center" prop="out_date" label="出库日期" width="180" />
                                        <el-table-column align="center" prop="customer_name" label="供应商/客户"
                                            width="120" />
                                        <el-table-column align="center" prop="contact_name" label="出库/采购退货负责人"
                                            width="180" />
                                        <el-table-column align="center" prop="contact_mobile" label="联系电话"
                                            width="120" />
                                        <el-table-column align="center" prop="note" label="备注" width="120" />
                                        <el-table-column align="center" prop="creator_name" label="创建人" width="120" />
                                        <el-table-column align="center" prop="created_at" label="创建时间" width="180" />

                                    </el-table>
                                </div>

                                <div class="pagination">

                                    <Pagination v-model:current-page="outboundRecordPage"
                                        v-model:page-size="outboundRecordPageSize" :page-sizes="[10, 20, 50, 100]"
                                        :total="outboundRecordTotal" layout="total, sizes, prev, pager, next, jumper" />
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="库存盘点" name="stock-check">
                            <div class="stock-check-content">
                                <div class="search-bar" style="justify-content: flex-start;">
                                    <el-input @input="getStockCheckList" v-model="stockCheckSearch"
                                        placeholder="盘点单号/产品名称" style="width: 250px">
                                        <template #prefix>
                                            <el-icon>
                                                <Search />
                                            </el-icon>
                                        </template>
                                    </el-input>
                                    <!-- 
                                    <div class="filter-buttons">
                                        <span class="margin-right-10">显示:</span>
                                        <el-button :color="stockCheckStatusData === 'pending' ? '#172B4D' : ''"
                                            @click="handleShowStockCheck('pending')"> 待提交 </el-button>
                                        <el-button :color="stockCheckStatusData === 'approved' ? '#172B4D' : ''"
                                            @click="handleShowStockCheck('approved')"> 审核中 </el-button>
                                        <el-button :color="stockCheckStatusData === 'approved' ? '#172B4D' : ''"
                                            @click="handleShowStockCheck('approved')"> 已完成 </el-button>
                                        <el-button :color="stockCheckStatusData === 'approved' ? '#172B4D' : ''"
                                            @click="handleShowStockCheck('approved')"> 已驳回 </el-button>
                                    </div> -->
                                </div>

                                <div class="stock-check-list inbound-list">
                                    <el-table :data="stockCheckList" border style="width: 100%">
                                        <el-table-column align="center" prop="name" label="盘点名称" width="120" />
                                        <el-table-column align="center" prop="check_date" label="盘点日期" width="180" />
                                        <el-table-column align="center" prop="warehouse_name" label="盘点仓库"
                                            width="120" />
                                        <el-table-column label="状态" prop="checker" width="100">
                                            <template #default="scope">
                                                <div>
                                                    <el-tag type="primary" v-if="scope.row.status == 0">待提交</el-tag>
                                                    <el-tag type="warning"
                                                        v-else-if="scope.row.status == 1">审核中</el-tag>
                                                    <el-tag type="success"
                                                        v-else-if="scope.row.status == 2">审核完成</el-tag>
                                                    <el-tag type="danger"
                                                        v-else-if="scope.row.status == 3">审核拒绝</el-tag>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="center" prop="manager_name" label="盘点负责人" width="120" />
                                        <el-table-column align="center" prop="note" label="备注" min-width="200">
                                            <template #default="scope">
                                                <div>{{ scope.row.note || '--' }}</div>
                                            </template>
                                        </el-table-column>

                                        <el-table-column align="center" prop="creator_name" label="创建人" width="100" />
                                        <el-table-column align="center" prop="created_at" label="创建时间" width="180" />
                                        <el-table-column label="操作" width="180" fixed="right" align="center">
                                            <template #default="scope">
                                                <el-button plain size="small" type="primary"
                                                    @click="handleClickEdit(scope.row)">编辑</el-button>
                                                <el-button v-if="scope.row.status == 0" plain size="small"
                                                    type="warning"
                                                    @click="handleClickSubmit(scope.row)">提交审核</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>

                                <div class="pagination">
                                    <el-pagination v-model:current-page="stockCheckPage"
                                        v-model:page-size="stockCheckPageSize" :page-sizes="[10, 20, 50, 100]"
                                        :total="stockCheckTotal" layout="total, sizes, prev, pager, next, jumper" />
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="库存调拨" name="stock-transfer">
                            <div class="stock-transfer-content">
                                <div class="search-bar" style="justify-content: flex-start; align-items: center;">
                                    <el-input @input="getStockTransferList" v-model="stockTransferSearch"
                                        placeholder="调拨单号/产品名称" style="width: 250px">
                                        <template #prefix>
                                            <el-icon>
                                                <Search />
                                            </el-icon>
                                        </template>
                                    </el-input>

                                    <!-- <div class="right-buttons margin-left-10">
                                        <span class="margin-right-10">显示:</span>
                                        <el-button :color="stockTransferStatusData === 'pending' ? '#172B4D' : ''"
                                            @click="handleAddStockTransfer('pending')"> 待提交 </el-button>
                                        <el-button :color="stockTransferStatusData === 'approved' ? '#172B4D' : ''"
                                            @click="handleAddStockTransfer('approved')"> 审核中 </el-button>
                                        <el-button :color="stockTransferStatusData === 'approved' ? '#172B4D' : ''"
                                            @click="handleAddStockTransfer('approved')"> 审核完成 </el-button>
                                        <el-button :color="stockTransferStatusData === 'approved' ? '#172B4D' : ''"
                                            @click="handleAddStockTransfer('approved')"> 审核拒绝 </el-button>
                                    </div> -->
                                </div>

                                <div class="stock-transfer-list inbound-list">
                                    <el-table :data="stockTransferList" border style="width: 100%">
                                        <el-table-column align="center" prop="transfer_no" label="调拨单号" width="200">
                                            <template #default="scope">
                                                <div style="color: blue; cursor: pointer;">
                                                    {{ scope.row.transfer_no }}
                                                </div>

                                            </template>
                                        </el-table-column>
                                        <el-table-column align="center" prop="transfer_date" label="调拨日期" width="120" />
                                        <el-table-column align="center" prop="to_warehouse_name" label="调入仓库"
                                            width="120" />
                                        <el-table-column label="状态" width="100">
                                            <template #default="scope">
                                                <div>
                                                    <el-tag type="warning" v-if="scope.row.status == 1">审核中</el-tag>
                                                    <el-tag type="success"
                                                        v-else-if="scope.row.status == 2">审核完成</el-tag>
                                                    <el-tag type="danger"
                                                        v-else-if="scope.row.status == 3">审核拒绝</el-tag>
                                                    <el-tag v-else>待提交</el-tag>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="center" prop="note" label="备注" min-width="180">
                                            <template #default="scope">
                                                <div>{{ scope.row.note }}</div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column align="center" prop="creator_name" label="创建人" width="100" />
                                        <el-table-column align="center" prop="created_at" label="创建时间" width="180" />

                                        <el-table-column label="操作" width="180" fixed="right">
                                            <template #default="scope">
                                                <el-button :disabled="scope.row.status != 0" link type="success"
                                                    @click="handleConfirmTransfer(scope.row)">提交</el-button>
                                                <el-button :disabled="scope.row.status != 0" link type="warning"
                                                    @click="handleRejectTransfer(scope.row)">编辑</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>

                                <div class="pagination">
                                    <!-- <el-pagination v-model:current-page="stockTransferPage"
                                        v-model:page-size="stockTransferPageSize" :page-sizes="[10, 20, 50, 100]"
                                        :total="stockTransferTotal" layout="total, sizes, prev, pager, next, jumper" /> -->
                                    <Pagination v-model:current-page="stockTransferPage"
                                        v-model:page-size="stockTransferPageSize" :page-sizes="[10, 20, 50, 100]"
                                        :total="stockTransferTotal" layout="total, sizes, prev, pager, next, jumper" />
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="耗材设置" name="consumables">
                            <div class="consumables-content">
                                <div class="search-bar">
                                    <div class="right-buttons">
                                    </div>
                                </div>
                                <div class="consumables-list inbound-list">
                                    <el-table :data="consumablesList" border height="600" style="width: 43%">
                                        <el-table-column label="服务项目" prop="title" width="250" align="center" />

                                        <el-table-column label="损耗设置" width="250" align="center">
                                            <template #default="scope">
                                                <el-button link type="primary"
                                                    @click="handleEditConsumable(scope.row)">设置</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>


                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </el-drawer>

        <!-- 耗材设置 -->
        <ConsumablesSetup ref="LossSettingRef" @init="getConsumablesSettingsData" />

        <!-- 库存盘点 -->
        <InventoryCountDialog v-model:dialogVisible="dialogRowShow" :dialogType="dialogType" :dialogRow="dialogRow"
            @submit="handleSubmit" />


        <!-- 库存调拨 -->
        <transferDialog v-model:dialogVisible="TransferShow" :dialogType="dialogType" :dialogRow="dialogRow"
            @submit="handleSTransfer" />

        <!-- 出库 -->
        <OutboundDialog v-model:dialogVisible="OutboundShow" :dialogType="dialogType" :dialogRow="dialogRow"
            @submit="handleSubmit" />
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ArrowDown, Close, Search, RefreshRight, Download, Plus, Expand, Fold } from '@element-plus/icons-vue';
import ConsumablesSetup from './ConsumablesSetup.vue';
import api from '@/api';
import { ElMessageBox, ElMessage } from 'element-plus';
import Pagination from "@/components/Pagination.vue";
import transferDialog from "../components/InventoryTransfer/transferDialog.vue";
import InventoryCountDialog from "../components/InventoryCount/InventoryCountDialog.vue";
import OutboundDialog from "./ProductOutbound/OutboundDialog.vue";

const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    dialogRow: {
        type: Object,
        default: () => ({})
    }
});

let dialogType = ref<string>('');
let dialogRow = ref<any>({});
const emit = defineEmits(['update:dialogVisible']);

const dialogVisible = computed({
    get: () => props.dialogVisible,
    set: (val) => emit('update:dialogVisible', val)
});

watch(dialogVisible, (val) => {
    if (val) {
        activeTab.value = 'basic';
    }
});

const activeTab = ref('basic');


const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);


// 产品库存数据
const productList = ref([
    {
        name: '华为笔记本电脑',
        code: 'HWPC0001',
        model: 'MateBook 15 D',
        unit: '个',
        stock: 680,
        minStock: 100,
        maxStock: 1000,
        image: 'https://example.com/image1.jpg'
    },
    {
        name: '罗技鼠标',
        code: 'LGSB00012',
        model: 'g520',
        unit: '个',
        stock: 5000,
        minStock: 1000,
        maxStock: 8000,
        image: 'https://example.com/image2.jpg'
    }
]);


// 出库单数据
const outboundList = ref([

]);
let outboundStatusData = ref('pending');
const handleShowOutbound = (status: string) => {
    outboundStatusData.value = status;
}

// 出库记录数据
const outboundRecordList = ref([

]);
const outboundRecordSearch = ref('');
const outboundRecordPage = ref(1);
const outboundRecordPageSize = ref(10);
const outboundRecordTotal = ref(0);

const handleTabClick = async (tab) => {
    // 获取产品列表
    if (tab.props.name == 'inventory') {
        let res = await api.productbasics.getproductList({
            page: 1,
            page_size: 9999  // 设置一个很大的值，一次性获取所有数据
        });
        if (res.code == 200) {
            filteredCategories.value = res.data.data;
            activeCategory.value = filteredCategories.value[0].id;
            getProductStock(activeCategory.value);

        }

    }

    if (tab.props.name == 'stock-check') {
        getStockCheckList();
    }

    if (tab.props.name == 'stock-transfer') {
        getStockTransferList();

    }

    if (tab.props.name == 'inbound-record') {
        getInboundRecordList();
    }

    if (tab.props.name == 'consumables') {
        getConsumablesList();
    }

    if (tab.props.name == 'outbound') {
        getOutboundList();
    }

    if (tab.props.name == 'outbound-record') {
        getOutboundRecordList();
    }



}





const getOutboundRecordList = async () => {
    let res = await api.product.warehouse_product_out_record_list({
        page: outboundRecordPage.value,
        page_size: outboundRecordPageSize.value,
        keywords: outboundRecordSearch.value,
    });
    if (res.code == 200) {
        outboundRecordList.value = res.data.data;
        outboundRecordTotal.value = res.data.pager.total_records;
    }
}


let OutboundShow = ref<boolean>(false);
const OutboundClickEdit = async (row: any) => {
    let res = await api.product.warehouse_product_out_detail({
        id: row.id,
    });

    if (res.code === 200) {
        dialogRow.value = res.data;
        OutboundShow.value = true;

    }
}

// 出库相关的分页和搜索数据
const outboundSearch = ref('');

const outboundPage = ref(1);
const outboundPageSize = ref(10);
const outboundTotal = ref(0);
let searchStatus = ref('1');

const handleStatusFilter = (status: string) => {
    if (searchStatus.value == '') {
        searchStatus.value = status;
    } else if (searchStatus.value != '' && status == searchStatus.value) {
        searchStatus.value = '';
    } else {
        searchStatus.value = status;
    }

    getOutboundList();
}

const getOutboundList = async () => {
    let res = await api.product.warehouse_product_out_list({
        page: outboundPage.value,
        page_size: outboundPageSize.value,
        keywords: outboundSearch.value,
        warehouse_id: props.dialogRow.id,
        status: searchStatus.value,
    });
    if (res.code == 200) {
        outboundList.value = res.data.data;
        outboundTotal.value = res.data.pager.total_records;
    }
}

const getConsumablesList = async () => {
    let res = await api.publicFun.service_item_list({
        // page: 1,
        // pageSize: 999,
        // keywords: '',
        warehouse_id: props.dialogRow.id,
    });
    if (res.code == 200) {
        consumablesList.value = res.data;

    }
}

const getConsumablesSettingsData = () => {
    getConsumablesList();
}

// 入库记录数据
const recordList = ref([

]);

const recordSearch = ref('');
const recordPage = ref(1);
const recordPageSize = ref(10);
const recordTotal = ref(0);
// 入库记录
const getInboundRecordList = async () => {
    let res = await api.product.product_in_record({
        page: outboundRecordPage.value,
        page_size: outboundRecordPageSize.value,
        keyword: recordSearch.value,
    });
    if (res.code == 200) {
        recordList.value = res.data.data;
        recordTotal.value = res.data.pager.total_records;
    }
}

// 调拨相关数据
const stockTransferSearch = ref('');
const stockTransferPage = ref(1);
const stockTransferPageSize = ref(10);
const stockTransferTotal = ref(0);


// 库存调拨数据
const stockTransferList = ref([

]);


const getStockTransferList = async () => {
    let res = await api.product.stock_transfer_list({
        page: stockTransferPage.value,
        page_size: stockTransferPageSize.value,
        keywords: stockTransferSearch.value,
        warehouse_id: props.dialogRow.id,
    });
    if (res.code === 200) {
        stockTransferList.value = res.data.data;
        stockTransferTotal.value = res.data.pager.total_records;
    }

}




// 盘点相关数据
const stockCheckSearch = ref('');
const stockCheckPage = ref(1);
const stockCheckPageSize = ref(10);
const stockCheckTotal = ref(0);
let dialogRowShow = ref<boolean>(false);
//库存盘点
const getStockCheckList = async () => {
    let res = await api.product.stock_check_list({
        page_size: stockCheckPageSize.value,
        page: stockCheckPage.value,
        keywords: stockCheckSearch.value,
        warehouse_id: props.dialogRow.id,
    });
    if (res.code == 200) {
        stockCheckList.value = res.data.data;
        stockCheckTotal.value = res.data.pager.total_records;
    }
}

// 提交表单回调
const handleSubmit = () => {
    getStockCheckList();
}

// 定义库存盘点数据类型
interface InventoryCount {
    id: string | number;
    check_no: string;
    name: string;
    check_date: string;
    warehouse_id: number | string;
    warehouse_name: string;
    manager_member_id: number | string;
    manager_name: string;
    status: number;
    status_text: string;
    note: string;
    submit_member_id: string;
    submit_name: string;
    submit_time: string;
    audit_admin_id: string;
    audit_name: string;
    audit_time: string;
    audit_opinion: string;
    creator_admin_id: number | string;
    creator_name: string;
    created_at: string;
    updated_at: string;
    rowNumber?: number;
}


// 提交审核
const handleClickSubmit = (row: InventoryCount) => {
    ElMessageBox.confirm(
        `确定要提交审核吗？`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    ).then(async () => {
        try {
            // 这里调用提交审核API
            const res = await api.product.stock_check_change_status({
                ids: JSON.stringify([row.id]),
                status: 1
            });
            if (res.code === 200) {
                ElMessage.success('提交审核成功');
                getStockCheckList();
            } else {
                ElMessage.error(res.msg || '提交审核失败');
            }
        } catch (error) {
            console.error('提交审核失败', error);

        }
    })
}

// 编辑库存盘点
const handleClickEdit = (row: InventoryCount) => {
    dialogType.value = 'edit';
    dialogRow.value = { ...row } as InventoryCount;
    dialogRowShow.value = true;
}

const inputSearch = () => {
    getProductStock(activeCategory.value);
}

let shechValue = ref<string>('');
//获取产品库存
const getProductStock = async (id: string | number) => {
    console.log(dialogRow.value, 'dialogRow.value');

    let res = await api.product.product_stock_list({
        page: currentPage.value,
        page_size: pageSize.value,
        keywords: shechValue.value,
        spu_id: id,
        warehouse_id: props.dialogRow.id,
    });
    if (res.code == 200) {
        productList.value = res.data.data;
        console.log(productList.value, 'productList.value', res);
        total.value = res.data.pager.total_records;
    }
}





// 库存盘点数据
const stockCheckList = ref([
    {
        checkNo: 'PD240302001',
        date: '2024-03-02',
        checker: '张三',
        productCount: 100,
        profitCount: 2,
        lossCount: 1,
        status: 'draft',
        statusText: '草稿',
        remark: '月度盘点'
    }
]);








const handleConfirmTransfer = (row: any) => {
    ElMessageBox.confirm(
        `确定要提交审核吗？`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    ).then(async () => {
        try {
            const res = await api.product.stock_transfer_change_status({ ids: JSON.stringify([row.id]), status: 1 });
            if (res.code === 200) {
                ElMessage.success('提交审核成功');
                getStockTransferList();
            } else {
                ElMessage.error(res.message || '提交审核失败');
            }
        } catch (error) {
            console.error('提交审核失败', error);
        }
    })
};
// 定义仓库数据类型
interface Warehouse {
    id: string | number;
    transfer_no: string; // 库存调拨单号
    transfer_date: string; // 调拨日期
    to_warehouse_id: number | string; // 拨入的仓库ID
    to_warehouse_name: string; // 拨入的仓库名称
    status: number; // 库存调拨状态，0: 待提交，1: 审核中，2: 审核完成，3: 审核拒绝
    note: string; // 备注
    creator_admin_id: string; // 创建人ID
    creator_name: string; // 创建人姓名
    submit_member_id: string; // 提交人ID
    submit_name: string; // 提交人姓名
    submit_time: string; // 提交时间
    audit_admin_id: string; // 审核人ID
    audit_name: string; // 审核人姓名
    audit_time: string; // 审核时间
    audit_opinion: string; // 审核意见
    created_at: string; // 创建时间
    updated_at: string; // 更新时间
}

let TransferShow = ref<boolean>(false);

const handleRejectTransfer = (row: any) => {
    dialogType.value = 'edit';
    dialogRow.value = { ...row } as Warehouse;
    TransferShow.value = true;
};


const handleSTransfer = () => {
    getStockTransferList();
}


// 耗材数据
const consumablesList = ref([

]);

const LossSettingRef = ref<any>(null);


const handleEditConsumable = (row: any) => {
    console.log('打开损耗设置弹窗，行数据:', row);
    row.warehouse_id = props.dialogRow.id;
    LossSettingRef.value.openDialog(row);
};



// 产品分组相关数据
const isCollapsed = ref(false);
const showSearch = ref(false);
const categorySearch = ref('');
const activeCategory = ref<string | number>(1);


interface Category {
    id: string;
    name: string;
}

let filteredCategories = ref<Category[]>([]);

// 切换搜索框显示状态
const toggleSearch = () => {
    showSearch.value = !showSearch.value;
};

// 处理分组选择
const handleCategorySelect = (index: string | number) => {
    console.log(index, 'index');
    activeCategory.value = index;
    getProductStock(activeCategory.value);
    // 这里可以根据选中的分组ID加载对应的产品列表
};
</script>

<style lang="scss" scoped>
::v-deep .inventory-layout .product-category .category-list .el-menu-item.is-active {
    color: #6860FF !important;
    background-color: #6860ff15 !important;

}


//表格样式
::v-deep .product-list {
    .el-table {
        --el-table-header-bg-color: rgba(235, 236, 240, 1);

        th {
            color: #444;
            font-weight: bold;
        }
    }

}

//表格样式
::v-deep .inbound-list {
    .el-table {
        --el-table-header-bg-color: rgba(235, 236, 240, 1);

        th {
            color: #444;
            font-weight: bold;
        }
    }


}

//分页样式
.pagination {
    width: calc(100% - 1000px);
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding-top: 10px;

}


.warehouse-details {
    .drawer-header {
        padding: 16px 20px;
        border-bottom: 1px solid #E4E7ED;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
    }

    .drawer-content {
        height: calc(100% - 60px);
        overflow-y: auto;

        .tab-header {
            padding: 20px;
            background-color: #F5F7FA;

            .warehouse-info {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;

                .info-item {
                    min-width: 200px;

                    .label {
                        color: #909399;
                        margin-right: 8px;
                        margin-bottom: 4px;
                    }

                    .value {
                        color: #333;
                        font-weight: 500;
                        font-size: 14px;
                    }
                }
            }
        }

        .tab-container {
            padding: 20px;

            :deep(.el-tabs__header) {
                margin-bottom: 20px;
            }
        }

        .info-section {
            margin-bottom: 24px;

            .section-title {
                background-color: #F5F7FA;
                padding: 12px 10px;
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 16px;
                font-size: 14px;
                font-weight: bold;
                color: #333;

                .el-icon {
                    font-size: 16px;
                    color: #626aef;
                }
            }

            .info-grid {

                padding: 16px;
                border-radius: 4px;

                .info-row {
                    display: flex;
                    margin-bottom: 16px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .info-col {
                        flex: 1;
                        display: flex;
                        align-items: center;

                        &.full-width {
                            flex: 2;
                        }

                        .label {
                            width: 80px;
                            color: #909399;
                            flex-shrink: 0;
                            margin-left: 10px;
                        }

                        .value {
                            color: #333;
                            flex: 1;
                            display: inline-block;
                            padding: 6px;
                            font-size: 14px;
                            background-color: #F5F7FA;
                        }
                    }
                }
            }
        }
    }
}

:deep(.el-drawer) {
    .el-drawer__body {
        padding: 0;
    }
}

:deep(.el-tabs__nav-wrap::after) {
    height: 1px;
}

:deep(.el-tabs__active-bar) {
    background-color: #626aef;
}

:deep(.el-tabs__item.is-active) {
    color: #626aef;
}

:deep(.el-tabs__item:hover) {
    color: #626aef;
}

.search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .right-buttons {
        display: flex;
        gap: 8px;
    }

    .filter-buttons {
        margin-left: 16px;
    }
}

.product-list,
.inbound-list,
.record-list {
    margin-bottom: 16px;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0;
}

:deep(.el-table) {
    --el-table-header-bg-color: #F5F7FA;

    th {
        background-color: var(--el-table-header-bg-color);
        color: #606266;
        font-weight: 500;
    }
}

:deep(.el-button) {
    &.is-plain {
        &:hover {
            color: #626aef;
            border-color: #626aef;
        }
    }
}

:deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background-color: #626aef;
    border-color: #626aef;
    box-shadow: -1px 0 0 0 #626aef;
}

.inventory-layout {
    display: flex;
    height: 100%;

    .product-category {
        width: 200px;
        height: 100%;
        border-right: 1px solid var(--el-border-color-light);
        transition: width 0.3s;
        background-color: rgb(245, 247, 249);
        padding: 0px 12px;
        margin-right: 10px;
        display: flex;
        flex-direction: column;

        &.is-collapsed {
            width: 0;
            overflow: hidden;
        }

        .category-header {
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--el-border-color-light);

            .header-title {
                display: flex;
                align-items: center;
                gap: 90px;
                justify-content: space-between;
                font-size: 14px;
                font-weight: 500;
            }
        }

        .category-search {
            padding: 12px;
            border-bottom: 1px solid var(--el-border-color-light);
        }

        .category-list {
            flex: 1;
            overflow-y: auto;
            
            .el-menu {
                border-right: none;
            }

            .el-menu-item {
                height: 40px;
                line-height: 40px;

                &.is-active {
                    background-color: var(--el-color-primary-light-9);
                    color: var(--el-color-primary);
                }
            }
        }
    }

    .product-content {
        flex: 1;

        transition: margin-left 0.3s;

        &.is-expanded {
            margin-left: 0;
        }

        .search-bar {
            margin-bottom: 16px;
        }
    }
}

// 表格样式优化
.product-list {
    :deep(.el-table) {
        --el-table-header-bg-color: #F5F7FA;

        th {
            background-color: var(--el-table-header-bg-color);
            color: #606266;
            font-weight: 500;
        }
    }
}
</style>
